<template>
<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>slot layout demo</title>
	</head>
	<body>
		<AppLayout>
			<h1 slot="header">Header</h1>
			<div>
				Main Block
			</div>
			<p slot="footer">Footer Block</p>
		</AppLayout>
		<hr>
		<button @click="changeComponent">chang component</button>
		<component v-bind:is="currentView"></component>
	</body>
	</html>	
</template>
<script>
import AppLayout from './components/App-Layout.vue'
import ArticleBlock from './components/ArticleBlock.vue'
import UserList from './components/UserList.vue'

export default {
	name: 'App2',
	data() {
		return {
			currentView: 'ArticleBlock'
		}
	},
	components: {
		AppLayout, UserList, ArticleBlock
	},
	methods: {
		changeComponent: function() {
			this.currentView = this.currentView === "UserList" ? "ArticleBlock" : "UserList";
		}
	}
}

</script>